<template>
	<div class="crMonitor">
         <el-tabs v-model="activeName">
            <el-tab-pane label="版权监测订单" name="first">           
                <el-table :data="RESDATA" v-loading="listLoading" stripe style="width: 100%;">
                    <el-table-column type="expand">
						<template slot-scope="props">
							<div class="table-expand clear">
								<dl>
									<dt>监测作品名称</dt>
									<dd>{{ props.row.product_name }}</dd>
								</dl>
								<dl>
									<dt>作品类型</dt>
									<dd>{{ props.row.product_type_zh }}</dd>
								</dl>
								<dl>
									<dt>著作权人</dt>
									<dd>{{ props.row.product_rightowner }}</dd>
								</dl>
								<dl>
									<dt>监测周期</dt>
									<dd>{{ props.row.period_name }}</dd>
								</dl>
								<dl>
									<dt>申请时间</dt>
									<dd>{{ props.row.add_time }}</dd>
								</dl>
								<dl>
									<dt>审核状态</dt>
									<dd>{{ props.row.status_zh }}</dd>
								</dl>
							</div>
						</template>
					</el-table-column>
                    <el-table-column prop="requires_id" label="ID" width="50">
                    </el-table-column>
                    <el-table-column label="订单号" width="160">
						<template slot-scope="scope">
							{{scope.row.o_id?scope.row.o_id:''}}
						</template>
                    </el-table-column>
                    <el-table-column prop="product_name" width="120" label="作品名称">
                    </el-table-column>
                    <!-- <el-table-column prop="product_type_zh" label="作品类型">
                    </el-table-column>
                    <el-table-column prop="product_rightowner" width="160" label="著作权人">
                    </el-table-column> -->
                    <el-table-column prop="add_time" width="160" label="申请时间">
                    </el-table-column>
                    <el-table-column prop="status_zh" label="审核状态">
                    </el-table-column>
                    <el-table-column label="发票状态">
                        <template slot-scope="scope">
                            <span v-if="scope.row.invoice_status == 1" class="span-hover" @click="invoiceShow(scope.$index, scope.row)">发票申请</span>
                            <span v-else-if="scope.row.invoice_status == 2">已申请</span>
                            <span v-else-if="scope.row.invoice_status == 3">已寄出</span>
                            <span v-else>未申请</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="110px">
                        <template slot-scope="scope">
                            <div v-if="scope.row.status == 0 ">
                                <span class="span-hover" @click="requiresEditFn(scope.$index, scope.row)">编辑</span>
                                <span class="span-hover" @click="requiresDelFn(scope.$index, scope.row)">删除</span>
                            </div>
                            <div v-else-if="scope.row.status == 2 ">
                                <span class="span-hover" @click="uploadNum(scope.$index,scope.row)">上传汇款单号</span>
                            </div>
                            <div v-else-if="scope.row.status == 3 ">
                                <span class="span-hover" @click="uploadNum(scope.$index,scope.row)">上传汇款单号</span>
                                <span class="span-hover" @click="toDetails(scope.$index, scope.row)">查看监测详情</span>
                                <span class="span-hover" @click="unauthShow(scope.$index, scope.row)">盗版上传</span>
                            </div>
                            <div v-else-if="scope.row.status == 4"><span class="span-hover">下载监测报告</span></div>
                            <div v-else>
                                <span class="span-hover" @click="requiresDelFn(scope.$index, scope.row)">删除</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页-->
                <div class="block-pageination clear">
                    <el-pagination background class="right" @current-change="handleCurrentChange" :page-size="10" layout="prev, pager, next" :total="total"></el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="版权盗版列表" name="second">
                <el-table :data="unauthList" v-loading="listLoading" stripe style="width: 100%;">
                    <el-table-column prop="product_name" label="侵权作品名称">
                    </el-table-column>
                    <el-table-column prop="site_name" label="盗版网站名称">
                    </el-table-column>
                    <el-table-column label="盗版链接" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <a class="links" :href="scope.row.url" target="_blank" v-text="scope.row.url"></a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="unauth_name" label="盗版内容名称">
                    </el-table-column>
                    <el-table-column prop="add_time" width="120" label="上传时间">
                    </el-table-column>
                    <el-table-column prop="status_str" label="审核状态">
                    </el-table-column>
                    <el-table-column label="操作" width="110px">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status == 0" class="span-hover" @click="unauthEditFn(scope.$index, scope.row)">编辑</span>
                            <span class="span-hover" @click="unauthDelFn(scope.$index, scope.row)">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页-->
                <div class="block-pageination clear">
                    <el-pagination background class="right" @current-change="unauthCurrentChange" :page-size="10" layout="prev, pager, next" :total="unauthtotal"></el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>
        
		<!-- 发票申请 -->
		<el-dialog title="发票申请" :visible.sync="invoiceFormVisible" width="30%">
			<el-form ref="invoiceForm" :model="invoiceForm" :rules="invoiceFormRules" label-width="110px" size="small">
                <el-form-item prop="invoice_type" label="发票类型">
                    <el-select v-model="invoiceForm.invoice_type" style="width:100%">
                        <el-option label="增值税普通发票" :value="1"></el-option>
                        <el-option label="增值税专用发票" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="title_type" label="发票抬头">
                    <el-radio-group v-model="invoiceForm.title_type">
                        <el-radio :label="1">个人</el-radio>
                        <el-radio :label="2">企业</el-radio>
                    </el-radio-group>
                </el-form-item>
				<el-form-item label="发票抬头名称" prop="title">
                    <el-input v-model="invoiceForm.title"></el-input>
				</el-form-item>
				<el-form-item label="邮寄地址" prop="address">
                    <el-input v-model="invoiceForm.address"></el-input>
				</el-form-item>
				<el-form-item label="联系人" prop="consignee">
                    <el-input v-model="invoiceForm.consignee"></el-input>
				</el-form-item>
				<el-form-item label="联系人手机号" prop="mobile">
                    <el-input v-model="invoiceForm.mobile"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="invoiceApply('invoiceForm')">提交</el-button>
					<!-- <el-button @click="resetForm('formAdd')">重置</el-button> -->
					<el-button @click="invoiceFormVisible = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
        
		<!-- 编辑 -->
		<el-dialog title="编辑监测需求" :visible.sync="requiresVisible" width="770px">
			<el-form :model="requires" :rules="requires_rules" size="small" ref="requires" label-width="125px">
                <el-form-item label="监测作品名称" prop="product_name">
                    <el-input v-model="requires.product_name" placeholder="" style="width:480px;"></el-input>
                </el-form-item>
                <!-- <el-form-item label="作品正版链接：" prop="product_url"> -->
                <el-form-item
                    v-for="(domain, index) in requires.product_url"
                    :label="'作品正版链接' +(index+1)"
                    :key="domain.key"
                    :prop="'product_url.' + index + '.value'"
                    :rules="[
                        { validator: validateAuthUrl, trigger: 'blur'}
                    ]"
                >
                    <el-input v-model="domain.value" placeholder="请以 http:// 或 https:// 开头" style="width:480px;">
                        <el-select class="product_url_select" v-model="domain.type" slot="append" placeholder="请选择">
                            <el-option label="网络链接" :value="1"></el-option>
                            <el-option label="网盘链接" :value="2"></el-option>
                        </el-select>
                    </el-input>
                    <el-button-group>
                        <el-button class="product_url_del" :disabled="(index == 0 && requires.product_url.length==1) ? true:false" @click.prevent="removeAuthUrl(domain)">删除</el-button>
                        <el-button class="product_url_add" v-if="index == requires.product_url.length-1"  @click="addAuthUrl">添加</el-button>
                    </el-button-group>
                </el-form-item>
                <el-form-item label="作品著作权人" prop="product_rightowner">
                    <el-input v-model="requires.product_rightowner" placeholder="" style="width:480px;">
                        <el-select class="product_url_select" v-model="requires.product_ownertype" slot="append" placeholder="请选择">
                            <el-option label="公司名称" :value="1"></el-option>
                            <el-option label="个人名称" :value="2"></el-option>
                        </el-select>
                    </el-input>
                </el-form-item>
                <el-form-item label="作品类型" prop="product_type">
                    <el-radio-group v-model="requires.product_type">
                        <el-radio v-for="item in product_type" :label="item.value" :key="item.label">{{ item.label }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="作品正版样本" prop="product_simple">
                    <el-upload class="upload-demo"
                    :action="uploadUrl"
                    :data="fileInfo.require_zhengbanyangpin"
                    :on-success="require_zhengbanyangpinSuccess"
                    :on-remove="require_zhengbanyangpinRemove"
                    :before-upload="require_zhengbanyangpinUpload"
                    :limit="5"
                    :on-exceed="require_zhengbanyangpinExceed"
                    :file-list="fileList.product_simple">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">最多上传5个文件，每个文件小于10M</div>
                    </el-upload>
                </el-form-item>
                
                <el-form-item label="选择监测周期" prop="period">
                    <el-radio-group v-model="requires.period">
                        <el-radio v-for="item in period" :label="item.value" :key="item.label">{{ item.label }}</el-radio>
                    </el-radio-group>
                    <div class="el-upload__tip">监测开始时间自服务合同签署后第二日开始监测。</div>
                </el-form-item>
                <div class="contract">
                    <a :href="`${fileUrl}/cam/public/static/contract_service.docx`" download="中云文化大数据科技有限公司版权监测服务合同">《中云文化大数据科技有限公司版权监测服务合同》</a>
                    <a :href="`${fileUrl}/cam/public/static/contract_entrust.docx`" download="中云文化大数据科技有限公司版权监测委托协议">《中云文化大数据科技有限公司版权监测委托协议》</a>
                </div>
                <el-form-item>
                    <el-button type="primary" @click="requiresEditSb('requires')">提交</el-button>
                    <el-button @click="requiresVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
		</el-dialog>
        
		<!-- 盗版上传 -->
		<el-dialog title="盗版上传" :visible.sync="unauthFormVisible" width="30%">
			<el-form ref="unauthForm" :model="unauthForm" :rules="unauthFormRules" label-width="100px" size="small">
				<el-form-item label="网站名称" prop="site_name">
                    <el-input v-model="unauthForm.site_name"></el-input>
				</el-form-item>
				<el-form-item label="网站网址" prop="url">
                    <el-input v-model="unauthForm.url"></el-input>
				</el-form-item>
				<el-form-item label="内容名称" prop="unauth_name">
                    <el-input v-model="unauthForm.unauth_name"></el-input>
				</el-form-item>
				<el-form-item label="网页截图" prop="pic">
                    <el-upload
                    :action="uploadUrl"
                    list-type="picture-card"
                    :on-success="unauthSuccess"
                    :on-remove="unauthRemove"
                    :before-upload="unauthUpload"
                    :limit="1"
                    :on-exceed="unauthExceed"
                    :file-list="fileList.unauth">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <div class="el-upload__tip">支持上传图片，每个文件小于2M，最多上传1个文件</div>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="unauthUploadFn('unauthForm')">提交</el-button>
					<!-- <el-button @click="resetForm('formAdd')">重置</el-button> -->
					<el-button @click="unauthFormVisible = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
        
		<!-- 盗版编辑 -->
		<el-dialog title="盗版上传" :visible.sync="unauthEditFormVisible" width="30%">
			<el-form ref="unauthEditForm" :model="unauthEditForm" :rules="unauthEditFormRules" label-width="100px" size="small">
				<el-form-item label="网站名称" prop="site_name">
                    <el-input v-model="unauthEditForm.site_name"></el-input>
				</el-form-item>
				<el-form-item label="网站网址" prop="url">
                    <el-input v-model="unauthEditForm.url"></el-input>
				</el-form-item>
				<el-form-item label="内容名称" prop="unauth_name">
                    <el-input v-model="unauthEditForm.unauth_name"></el-input>
				</el-form-item>
				<el-form-item label="网页截图" prop="pic">
                    <el-upload
                    :action="uploadUrl"
                    list-type="picture-card"
                    :on-success="unauthEditSuccess"
                    :on-remove="unauthEditRemove"
                    :before-upload="unauthEditUpload"
                    :limit="1"
                    :on-exceed="unauthEditExceed"
                    :file-list="fileList.unauthEdit">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <div class="el-upload__tip">支持上传图片，每个文件小于2M，最多上传1个文件</div>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="unauthEditSb('unauthEditForm')">提交</el-button>
					<!-- <el-button @click="resetForm('formAdd')">重置</el-button> -->
					<el-button @click="unauthEditFormVisible = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import { requiresGetlist,requiresGetdetail,requiresEdit,requiresDel,submitfile,host, unauthGetlist,unauthCheckurl,unauthAdd,unauthEdit,unauthDel,receiptAdd,invoiceAdd } from "@/api";
import { mapState, mapMutations } from "vuex";
export default {
    data() {
        var validateUrl = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入盗版网站网址'));
            } else {
                let domainArr = value.match(/[\w-]+\.(com|net|org|gov|cc|biz|info|cn|co|mobi|name|sh|ac|la|travel|tm|us|cc|tv|jobs|asia|hn|lc|hk|bz|ws|tel|io|tw|is|edu|mil|au|jp|int|kr|de|vc|ag|in|me|gd|vg|be|sg|it|ro|pw|win|cm|im|ca|top|wang|tt|so|xyz|vip|tn)\b(\.(cn|hk|uk|jp|tw|kr|mo|kr|ru))*/);
                // 2017-11-14 18:00:31 liuzz
                if(!domainArr){
                    let urlReg = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/;  
                    let urlIP=urlReg.exec(value);
                    if(urlIP){
                        if(this.isIp(urlIP[0])){
                            domainArr = true;
                        }
                    }
                }
                if(!this.IsURL(value) || !domainArr){
                    callback(new Error('此网址不是以http://https://开头，或者不是网址'));
                }else{
                    let para= {
                        user_id:this.user_id,
                        requires_id: this.requires_id,
                        unauth_id: this.unauth_id,
                        url: value,
                    }
                    unauthCheckurl(para).then(res=> {
                        if(res.data){
                            callback();
                        }else{
                            callback(new Error('此盗版网址已经录入了'));
                        }
                    });
                }
            }
        };
        return {
            fileUrl: host,
            imageUrl: host+'/cam/public/static/',
            activeName: 'first',
            RESDATA: [],
            page: 1,
            total: 10,
            listLoading: false,
            user_id: null,
            // 发票申请
            invoiceFormVisible: false,
            invoiceForm: {
                invoice_type: 1,
                title_type: 1,
                title: '',
                consignee: '',
                mobile: '',
                address: '',
            },
            invoiceFormRules:{
                invoice_type: [{ required: true, message: "请选择发票类型" }],
                title_type: [{ required: true, message: "请选择发票抬头" }],
                title: [{ required: true, message: "请填写发票抬头名称" }],
                consignee: [{ required: true, message: "请填写联系人" }],
                mobile: [{ required: true, message: "请填写联系人手机号" }],
                address: [{ required: true, message: "请填写邮寄地址" }],
            },
            // 编辑
            requiresVisible: false,

            // 上传地址
            uploadUrl: submitfile,
            pic_length: 0,
            fileInfo: {
                require_zhengbanyangpin: {
                    type: "pic",
                    foler: "require_zhengbanyangpin"
                }
            },
            fileList: {
                product_simple: [],
                unauth: [],
                unauthEdit: [],
            },
            requires: {
                product_name: '', // 作品名称
                product_rightowner: '', // 著作权人
                product_ownertype: 1, // 著作权人类型
                product_url: [ // 正版链接
                    {
                        value: '',
                        type: '1', // 正版链接类型
                    }
                ],
                product_type: '', // 作品类型
                product_simple: [], // 正版样本
                period: '', // 监测周期
            },
            requires_rules: {
                product_name: [{ required: true, message: "请填写监测作品名称" }], // 作品名称
                product_rightowner: [{ required: true, message: "请填写作品著作权人" }], // 著作权人
                product_type: [{ required: true, message: "请选择作品类型" }], // 作品类型
                product_simple: [{ required: true, message: "请上传正版样本" }], // 正版样本
                period: [{ required: true, message: "请选择监测周期" }]
            },

            // 作品类型选项
            product_type: [
                {
                    value: 1,
                    label: "文字"
                },
                {
                    value: 2,
                    label: "视频"
                },
                {
                    value: 3,
                    label: "图片"
                },
                {
                    value: 4,
                    label: "音乐"
                }
            ],
            period: [
                {
                    value: 1,
                    label: "一个月"
                },
                {
                    value: 2,
                    label: "三个月"
                },
                {
                    value: 3,
                    label: "半年期"
                },
                {
                    value: 4,
                    label: "一年期"
                }
            ],

            // 盗版上传
            unauthFormVisible: false,
            unauthForm: {
                site_name: '',
                url: '',
                unauth_name: '',
                pic: '',
            },
            unauthFormRules:{
                site_name: [{ required: true, message: "请填写盗版网站名称" }],
                url: [
                    { required: true, message: "请填写盗版网站网址", trigger: 'blur' },
                    { validator: validateUrl, trigger: 'blur' }
                ],
                unauth_name: [{ required: true, message: "请填写盗版内容名称" }],
                pic: [{ required: true, message: "请上传盗版网站截图" }],
            },
            unauth_pic_length: 0,
            
            // 盗版列表
            unauthList: [],
            unauthpage: 1,
            unauthtotal: 10,
            requires_id: null,
            unauth_id: null,

            // 盗版上传编辑
            unauthEditFormVisible: false,
            unauthEditForm: {
                site_name: '',
                url: '',
                unauth_name: '',
                pic: '',
            },
            unauthEditFormRules:{
                site_name: [{ required: true, message: "请填写盗版网站名称" }],
                url: [
                    { required: true, message: "请填写盗版网站网址", trigger: 'blur' },
                    { validator: validateUrl, trigger: 'blur' }
                ],
                unauth_name: [{ required: true, message: "请填写盗版内容名称" }],
                pic: [{ required: true, message: "请上传盗版网站截图" }],
            },
            unauthEdit_pic_length: 0,
        };
    },
    computed: {
        ...mapState([
            'croUser',
        ]),
    },
    mounted(){
        this.user_id = this.croUser.user_id || null;
        this.getRESDATA();
        this.getUnauthList();
    },
    methods: {
        ...mapMutations([
            'OUT_LOGIN',
        ]),
        
        // 作品正版样本：
        require_zhengbanyangpinRemove(file, fileList) {
            if(this.pic_length==0) return;
            this.pic_length--;
            if(file.response){
                this.requires.product_simple.remove(file.response.data);
            }else {
                this.requires.product_simple.remove(file.index);
            };
        },
        require_zhengbanyangpinSuccess(res, file) {
            if(res.data){
                this.pic_length++
                this.requires.product_simple.push(res.data);
                // console.log(this.pic_length,this.requires.product_simple.length,'++');
            }else {
                this.$message.warning(res.msg);
            }
        },
        require_zhengbanyangpinUpload(file) {
            // const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/bmp';
            const isLt2M = file.size / 1024 / 1024 < 10;
            // if (!isJPG) {
            //     this.$message.error('上传封面图片只能是 JPEG/BMP/PNG/GIF 格式!');
            // }
            if (!isLt2M) {
                this.$message.error('上传正版样本大小不能超过 10MB!');
            }
            return isLt2M;
        },
        require_zhengbanyangpinExceed(files, fileList) {
            this.$message.warning(`最多上传5个文件`);
        },
        // 判断是否为IP地址
        isIp(value){
            let regexp = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/;

            let valid = regexp.test(value);
    
            if(!valid){//首先必须是 xxx.xxx.xxx.xxx 类型的数字，如果不是，返回false
                return false;
            }
            
            return value.split('.').every(function(num){
                //切割开来，每个都做对比，可以为0，可以小于等于255，但是不可以0开头的俩位数
                //只要有一个不符合就返回false
                if(num.length > 1 && num.charAt(0) === '0'){
                    //大于1位的，开头都不可以是‘0’
                    return false;
                }else if(parseInt(num , 10) > 255){
                    //大于255的不能通过
                    return false;
                }
                return true;
            });
        },
        // 添加删除链接
        IsURL(str_url) {            	
            return !!str_url.match(/^(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/);
        },
        // 验证授权网址
        validateAuthUrl: function(rule, value, callback){
            if (value === '') {
                callback();
            } else {
                let domainArr = value.match(/[\w-]+\.(com|net|org|gov|cc|biz|info|cn|co|mobi|name|sh|ac|la|travel|tm|us|cc|tv|jobs|asia|hn|lc|hk|bz|ws|tel|io|tw|is|edu|mil|au|jp|int|kr|de|vc|ag|in|me|gd|vg|be|sg|it|ro|pw|win|cm|im|ca|top|wang|tt|so|xyz|vip|tn)\b(\.(cn|hk|uk|jp|tw|kr|mo|kr|ru))*/);
                // 2017-11-14 18:00:31 liuzz
                if(!domainArr){
                    let urlReg = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/;  
                    let urlIP=urlReg.exec(value);
                    if(urlIP){
                        if(this.isIp(urlIP[0])){
                            domainArr = true;
                        }
                    }
                }
                if(!this.IsURL(value) || !domainArr){
                    callback(new Error('此网址不是以http://https://开头，或者不是网址'));
                }else{
                    callback();
                }
            }
        },  
        removeAuthUrl(item) {
            var index = this.requires.product_url.indexOf(item)
            if (index !== -1) {
                this.requires.product_url.splice(index, 1)
            }
        },
        addAuthUrl() {
            this.requires.product_url.push({
                value: '',
                type: 1,
                key: Date.now()
            });
        },

        // 分页
        handleCurrentChange(val) {
            this.page = val;
            this.getRESDATA();
        },
        getRESDATA(){
			if(!this.croUser){
				this.OUT_LOGIN();
				this.$router.push('/login');
				return
			}
            let para = {
                user_id: this.user_id,
                page: this.page
            };
            requiresGetlist(para).then(res => {
                if(res.data){
                    this.RESDATA = res.data;
                    this.total = res.total;
                }else if(res.tologin) {
                    this.OUT_LOGIN();
                    this.$router.push('/login');
                }else {
                    this.$message.error(res.msg);
                }
            });
        },
        // 显示编辑
        async requiresEditFn(index,row){
            let requires = Object.assign({}, row);
            // requires.channel_id = requires.channel_id.split(',');
            // 已添加链接处理
            if(requires.product_url){
                let product_url = [];
                for(let i=0;i<requires.product_url.length;i++){
                    product_url[i] = {};
                    product_url[i].value = requires.product_url[i]['1'];
                    product_url[i].type = requires.product_url[i]['0'];
                }
                requires.product_url = product_url;

            }else {
                requires.product_url = [{
                    value: '',
                    type: 1,
                }];
            }

            // 已上传图片处理
            let pic = null;
            if(requires.product_simple){
                pic = requires.product_simple;
            }else {
                pic = [];
                requires.product_simple = [];
            }
            let picArr = [];
            pic.length>0 && (this.pic_length = pic.length); // 设置已有pic_length
            for(let i =0; i<pic.length; i++){
                picArr[i] = {
                    name: `file${i+1}`,
                    url: this.imageUrl+pic[i],
                    index: pic[i]
                }
            }
            this.fileList.product_simple = picArr;
            this.requires = requires;
            this.requiresVisible = true; //显示编辑框
        },
        
        // 提交编辑
        requiresEditSb(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    const loading = this.$loading({
                        lock: true,
                        text: '正在上传',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });

                    // 图片上传
                    let _this = this;
                    let timer1= setInterval(()=>{
                        if(_this.pic_length === _this.requires.product_simple.length){
                            // 清除定时器
                            clearInterval(timer1); 
                            clearTimeout(timer2);
                            timer1 = null; 
                            timer2 = null;

                            async function submit() {
                                let para = Object.assign({}, _this.requires);
                                para.user_id = _this.user_id;
                                let purl_arr= para.product_url;
                                let product_url = [];
                                for(let i=0;i<purl_arr.length;i++){
                                    product_url[i] = `${purl_arr[i].type},${purl_arr[i].value}`;
                                }
                                para.product_url = product_url;
                                let res_add  = await requiresEdit(para);
                                if(res_add.data){
                                    _this.$message.success(res_add.msg);
                                    _this.$refs.requires.resetFields();
                                    _this.pic_length = 0;
                                    _this.requires.product_url=[{value:'',type:'1'}];
                                    _this.fileList = {
                                        product_simple: [] // 样本
                                    };
                                    _this.requiresVisible = false;
                                    _this.getRESDATA();
                                }else if(res_add.tologin) {
                                    _this.OUT_LOGIN();
                                    _this.$router.push('/login');
                                }else {
                                    _this.$message.error(res_add.msg);
                                }

                                loading.close();
                            }
                            submit();
                        }
                    },30);
                    // 请求超时
                    let timer2 = setTimeout(()=>{
                        // 清除定时器
                        clearInterval(timer1); 
                        clearTimeout(timer2);
                        timer1 = null; 
                        timer2 = null;
                        this.$message('请求超时，请重试');
                        loading.close();
                    },5000);

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        
        // 删除需求
        requiresDelFn(inde,row){
            this.$confirm('确认删除该记录吗?', '提示', {
                type: 'warning'
            }).then(() => {
                this.listLoading = true;
                let para = { 
                    user_id: this.user_id,
                    requires_id: row.requires_id,
                };
                requiresDel(para).then((res) => {
                    this.listLoading = false;
                    if(res.data){
                        this.$message.success(res.msg);
                        this.getRESDATA();
                    }else if(res.tologin) {
                        this.OUT_LOGIN();
                        this.$router.push('/login');
                    }else {
                        this.$message.error(res.msg);
                    }
                });
            }).catch(() => {

            });
        },
        // 重置 
        resetForm(formName){
            this.$refs[formName].resetFields();
        },
        // 显示申请发票dialog
        invoiceShow(index,row){
            this.invoiceForm.user_id = this.user_id;
            this.invoiceForm.requires_id = row.requires_id;
            this.invoiceFormVisible = true;
        },
        invoiceApply(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let para = Object.assign({},this.invoiceForm);
                    invoiceAdd(para).then((res) => {
                        if(res.data){
                            this.$message.success(res.msg);
                            this.getRESDATA();
                            this.$refs[formName].resetFields();
                            this.invoiceFormVisible = false;
                        }else if(res.tologin) {
                            this.OUT_LOGIN();
                            this.$router.push('/login');
                        }else {
                            this.$message.error(res.msg);
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 上传汇款单号
        uploadNum(index,row){
            this.$prompt('请填写汇款单号', '汇款单号', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /\S/,
            inputErrorMessage: '请填写汇款单号'
            }).then(({ value }) => {
                //console.log();
                let para = {
                    user_id: this.user_id,
                    receipt_number: value,
                    requires_id: row.requires_id,
                    o_id: row.o_id,
                }
                receiptAdd(para).then((res) => {
                    if(res.data){
                        this.$message.success(res.msg);
                    }else if(res.tologin) {
                        this.OUT_LOGIN();
                        this.$router.push('/login');
                    }else {
                        this.$message.error(res.msg);
                    }
                });

            }).catch(() => {

            });
        },
        
        // 盗版截图上传：
        unauthRemove(file, fileList) {
            // if(this.unauth_pic_length==0) return;
            // this.unauth_pic_length--
            this.unauthForm.pic = '';
        },
        unauthSuccess(res, file) {
            // this.unauth_pic_length++
            this.unauthForm.pic = res.data;
        },
        unauthUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/bmp';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传封面图片只能是 JPEG/BMP/PNG/GIF 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传封面图片大小不能超过 2MB!');
            }
            return isLt2M;
        },
        unauthExceed(files, fileList) {
            this.$message.warning(`最多上传1个文件`);
        },
        // 盗版上传
        toDetails(index,row){
            this.$router.push(`/user/crMonitor/${row.requires_id}`);
        },
        unauthShow(index,row){
            this.requires_id = row.requires_id;
            this.unauth_id = null;
            this.unauthForm.requires_id = row.requires_id;
            this.unauthFormVisible = true;
        },
        unauthUploadFn(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    const loading = this.$loading({
                        lock: true,
                        text: '正在上传',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });

                    // 图片上传
                    let _this = this;
                    let timer1= setInterval(()=>{
                        if(_this.unauthForm.pic != ''){
                            // 清除定时器
                            clearInterval(timer1); 
                            clearTimeout(timer2);
                            timer1 = null; 
                            timer2 = null;

                            async function submit() {
                                let para = Object.assign({}, _this.unauthForm);
                                para.user_id = _this.user_id;
                                let res_add  = await unauthAdd(para);
                                if(res_add.data){
                                    _this.$message.success(res_add.msg);
                                    _this.$refs[formName].resetFields();
                                    _this.unauth_pic_length = 0;
                                    _this.unauthForm.pic = '';
                                    _this.fileList = {
                                        unauth: [] // 样本
                                    };
                                    _this.unauthFormVisible = false;
                                    _this.getUnauthList();
                                }else if(res_add.tologin) {
                                    _this.OUT_LOGIN();
                                    _this.$router.push('/login');
                                }else {
                                    _this.$message.error(res_add.msg);
                                }

                                loading.close();
                            }
                            submit();
                        }
                    },30);
                    // 请求超时
                    let timer2 = setTimeout(()=>{
                        // 清除定时器
                        clearInterval(timer1); 
                        clearTimeout(timer2);
                        timer1 = null; 
                        timer2 = null;
                        this.$message('请求超时，请重试');
                        loading.close();
                    },5000);

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 分页
        unauthCurrentChange(val) {
            this.unauthpage = val;
            this.getUnauthList();
        },
        getUnauthList(){
            let para={
                user_id: this.user_id,
                page: this.unauthpage,
            }
            unauthGetlist(para).then(res=>{
                if(res.data){
                    this.unauthList = res.data;
                    this.unauthtotal = res.total;
                }else if(res.tologin) {
                    this.OUT_LOGIN();
                    this.$router.push('/login');
                }else {
                    this.$message.error(res.msg);
                }
            });

        },
        
        
        // 编辑盗版截图上传：
        unauthEditRemove(file, fileList) {
            // if(this.unauth_pic_length==0) return;
            // this.unauth_pic_length--
            this.unauthEditForm.pic = '';
        },
        unauthEditSuccess(res, file) {
            // this.unauth_pic_length++
            this.unauthEditForm.pic = res.data;
        },
        unauthEditUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/bmp';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传封面图片只能是 JPEG/BMP/PNG/GIF 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传封面图片大小不能超过 2MB!');
            }
            return isLt2M;
        },
        unauthEditExceed(files, fileList) {
            this.$message.warning(`最多上传1个文件`);
        },
        // 显示编辑
        async unauthEditFn(index,row){
            let unauthEditForm = Object.assign({}, row);
            this.requires_id = row.requires_id;
            this.unauth_id = row.unauth_id;
            this.unauthEditForm = unauthEditForm;
            this.fileList.unauthEdit = [{
                    name: `img`,
                    url: this.imageUrl+unauthEditForm.pic
            }]
            this.unauthEditFormVisible = true; //显示编辑框
        },
        
        // 提交编辑
        unauthEditSb(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    const loading = this.$loading({
                        lock: true,
                        text: '正在上传',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });

                    // 图片上传
                    let _this = this;
                    let timer1= setInterval(()=>{
                        if(_this.pic_length === _this.requires.product_simple.length){
                            // 清除定时器
                            clearInterval(timer1); 
                            clearTimeout(timer2);
                            timer1 = null; 
                            timer2 = null;

                            async function submit() {
                                let para = Object.assign({}, _this.unauthEditForm);
                                para.user_id = _this.user_id;
                                let res_add  = await unauthEdit(para);
                                if(res_add.data){
                                    _this.$message.success(res_add.msg);
                                    _this.$refs[formName].resetFields();
                                    _this.unauthEdit_pic_length = 0;
                                    _this.unauthEditForm.pic = '';
                                    _this.fileList = {
                                        unauthEdit: [] // 样本
                                    };
                                    _this.unauthEditFormVisible = false;
                                    _this.getUnauthList();
                                }else if(res_add.tologin) {
                                    _this.OUT_LOGIN();
                                    _this.$router.push('/login');
                                }else {
                                    _this.$message.error(res_add.msg);
                                }

                                loading.close();
                            }
                            submit();
                        }
                    },30);
                    // 请求超时
                    let timer2 = setTimeout(()=>{
                        // 清除定时器
                        clearInterval(timer1); 
                        clearTimeout(timer2);
                        timer1 = null; 
                        timer2 = null;
                        this.$message('请求超时，请重试');
                        loading.close();
                    },5000);

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        
        // 删除盗版链接
        unauthDelFn(inde,row){
            this.$confirm('确认删除该记录吗?', '提示', {
                type: 'warning'
            }).then(() => {
                this.listLoading = true;
                let para = { 
                    user_id: this.user_id,
                    unauth_id: row.unauth_id,
                };
                unauthDel(para).then((res) => {
                    this.listLoading = false;
                    if(res.data){
                        this.$message.success(res.msg);
                        this.getUnauthList();
                    }else if(res.tologin) {
                        this.OUT_LOGIN();
                        this.$router.push('/login');
                    }else {
                        this.$message.error(res.msg);
                    }
                });
            }).catch(() => {

            });
        },
    }
};
</script>
<style scoped lang="scss">

.product_url_select {
    width: 110px;
}
.el-upload__tip {
    line-height: 1;
}
.contract {
    text-align: center;
    padding-bottom: 22px;
    line-height: 40px;
    a {
        color:#2c8bd1;
    }
}
.links{
    color:#2c8bd1;
}

.table-expand {
	font-size: 14px;
	line-height: 23px;
	dl {
		margin: 0;
		padding: 0;
		float: left;
		width: 50%;
		position: relative;
		dt {
			margin: 0;
			position: absolute;
			top: 0;
			left: 0;
			color: #5E87B0;
		}
		dd {
			margin: 0;
			padding: 0 30px 0 100px;
			word-break:break-all;
			a {
				color:#5E87B0;
			}
		}
	}
}
</style>
